﻿@{
    ViewBag.Title = "About";
    Layout = null;
}
<!DOCTYPE html>  
<html lang="en">  
  <head>  
	<meta charset="utf-8">  

    <link rel="stylesheet" href="/css/style.css">
	<link rel="stylesheet" href="/lib/jquery-ui/css/smoothness/jquery-ui-1.8.10.custom.css">
	<link rel="stylesheet" href="/css/iThing.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
	<script src="/lib/jquery-ui/js/jquery-ui-1.8.16.custom.min.js"></script>
    	
    <!-- Debug -->
	<script src="/jQRangeSlider-master/jQRangeSliderMouseTouch.js"></script>
	<script src="/jQRangeSlider-master/jQRangeSliderDraggable.js"></script>
	<script src="/jQRangeSlider-master/jQRangeSliderHandle.js"></script>
	<script src="/jQRangeSlider-master/jQRangeSliderBar.js"></script>
	<script src="/jQRangeSlider-master/jQRangeSliderLabel.js"></script>
	<script src="/jQRangeSlider-master/jQRangeSlider.js"></script>

	<script src="/jQRangeSlider-master/jQDateRangeSliderHandle.js"></script>
	<script src="/jQRangeSlider-master/jQDateRangeSlider.js"></script>
	
	<script src="/jQRangeSlider-master/jQEditRangeSliderLabel.js"></script>
	<script src="/jQRangeSlider-master/jQEditRangeSlider.js"></script>
	<!-- /Debug -->

  </head>  
  <body>
  <div id="first-block" class="block">
    <div class="mini-block">
    <strong class="block-number">1.1</strong>
    <label for="from">Розмістити від:</label>
    <input type="text" id="date-from" name="from" class="boldBlue"/>
    </div>
    <div class="mini-block">
    <label for="to">до:</label>
    <input type="text" class="boldBlue" id="date-to" name="to" />
    +безкоштовно <span id="free-days" class="boldBlue">0</span> днів.
    </div>

    <div id="date-slider" style="margin:10px 0; width: 80%"></div>

    <div class="mini-block"><strong class="block-number">1.2</strong>Ціна після знижки: <span id="price-after-discount" class="changingValue">0</span> CZK</div>
    <div class="mini-block">Знижка: <span id="discount" style="font-weight: bold; color:darkRed;">0</span>%</div>
    <div class="mini-block">Ціна без знижки: <span id="price-before-discount" style="font-weight: bold; color:deeppink;">0</span> CZK</div>
    <div id="price-slider" style="margin:10px 0; width: 80%"></div>

  </div>
  <div style="height: 20px;"></div>

  <div id="second-block" class="block">
      <div class="half-block">
              <div class="mini-block">
                  <strong class="block-number">2.1</strong>Як часто піднімати оголошення:
                  <span id="lift-message-frequncy" class="changingValue">7</span> годин/днів
              </div>
              <div id="lift-message-freq-slider" class="simple-slider"></div>
      </div>

      <div class="half-block">
              <div class="mini-block">
                  <strong class="block-number">2.2</strong>Час коли піднімати повідомлення:
                  <span id="lift-message-time" class="changingValue">5</span> годин
              </div>
              <div id="lift-message-time-slider" class="simple-slider"></div>
      </div>

      <div class="half-block">
              <div class="mini-block">
                  <strong class="block-number">2.3</strong>Кількість піднімань повідомлення:
                  <span id="lift-message-count" class="changingValue">450</span> разів
              </div>
              <div id="lift-message-count-slider" class="simple-slider"></div>
      </div>

      <div class="half-block">
              <div class="mini-block">
                  <strong class="block-number">2.4</strong>Ціна одного підняття не більше: 
                  <span id="lift-message-price" class="changingValue">2</span> CZK
              </div>
              <div id="lift-message-price-slider" class="simple-slider"></div>
      </div>

      <div class="mini-block"><strong class="block-number">2.5</strong>Ціна після знижки: <span id="price-after-discount2" class="changingValue">0</span> CZK</div>
        <div class="mini-block"><strong class="block-number">2.6</strong>Знижка: <span id="discount2" style="font-weight: bold; color:darkRed;">0</span> %</div>
        <div class="mini-block"><strong class="block-number">2.7</strong>Ціна без знижки: <span id="price-before-discount2" style="font-weight: bold; color:deeppink;">0</span> CZK</div>
        <div id="price-slider2" style="margin:10px 0; width: 80%"></div>
      
  </div>

    </body>  
</html>  

<script>
    //sliders
    var dateSlider = $('#date-slider'),
    priceSlider = $('#price-slider'),
    liftMessageSlider = $('#lift-message-freq-slider'),
    liftMessageTimeSlider = $('#lift-message-time-slider'),
    liftMessageCountSlider = $('#lift-message-count-slider'),
    liftMessagePriceSlider = $('#lift-message-price-slider'),
    priceSlider2 = $('#price-slider2'),
    //elements
    liftMessageCount = $('#lift-message-count'),
    dateFrom = $('#date-from'),
    dateTo = $('#date-to'),
    freeDays = $('#free-days'),
    priceAfterDiscount = $('#price-after-discount'),
    priceBeforeDiscount = $('#price-before-discount'),
    priceAfterDiscount2 = $('#price-after-discount2'),
    priceBeforeDiscount2 = $('#price-before-discount2'),
    discount2 = $('#discount2'),
    discount = $('#discount'),
    liftMessageFrequncy = $('#lift-message-frequncy'),
    liftMessageTime = $('#lift-message-time'),
    liftMessagePrice = $('#lift-message-price'),
    //constants
    maxPrice = 3200,
    minPrice = 222,
    maxDiscount = 90,
    minDiscount = 10,
    maxDays = 366;


    dateSlider.dateRangeSlider();

    priceSlider.rangeSlider();
    //2.1
    liftMessageSlider.slider({
      range: "min",
      value: 7,
      min: 1,
      max: 24,
      slide: function (event, ui) {
          liftMessageFrequncy.html(ui.value);
      }
    });
  //2.2

    liftMessageTimeSlider.slider({
        range: "min",
        value: 20,
        min: 1,
        max: 96,
        slide: function (event, ui) {
            var allMinutes = ui.value * 15,
            hours = Math.floor(allMinutes / 60),
            minutes = allMinutes - hours * 60;
            liftMessageTime.html(hours+'.'+minutes);
        }
    });

    //2.3
    liftMessageCountSlider.slider({
        range: "min",
        value: 450,
        min: 1,
        max: 8760,
        slide: function (event, ui) {
            calculate2ndBlockPrice();
            liftMessageCount.html(ui.value);
        }
    });

    //2.4
    liftMessagePriceSlider.slider({
        range: "min",
        value: 20,
        min: 1,
        max: 50,
        slide: function (event, ui) {
            calculate2ndBlockPrice();
            liftMessagePrice.html(ui.value / 10);
        }
    });

    priceSlider2.rangeSlider();
    priceSlider2.rangeSlider("bounds", 0, 200000);
    priceSlider2.rangeSlider({
        enabled: false
    });

    dateFrom.datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function (selectedDate) {
            dateTo.datepicker("option", "minDate", selectedDate);
        }
    });
    dateTo.datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function (selectedDate) {
            dateFrom.datepicker("option", "maxDate", selectedDate);
        }
    });

    dateSlider.dateRangeSlider("bounds", new Date(2013, 0, 1), new Date(2014, 0, 1));

    dateSlider.dateRangeSlider({
        valueLabels: "change",
        delayOut: 5000
    });

    dateSlider.dateRangeSlider({
        valueLabels: "change",
        durationIn: 1000,
        durationOut: 1000
    });

    dateSlider.dateRangeSlider({
        enabled: true
    });

//    dateSlider.dateRangeSlider({
//        formatter:function(val){
//            var days = val.getDate(),
//              month = val.getMonth() + 1,
//              year = val.getFullYear();
//            return days + "/" + month + "/" + year;
//        } 
//    });

    dateSlider.dateRangeSlider({
        range: {
            min: { days: 1 },
            max: { days: 366 }
        }
    });

    dateSlider.dateRangeSlider({
        step: {
            days: 1
        }
    });

//    var dateSliderBounds = dateSlider.dateRangeSlider("bounds");
//    console.log(dateSliderBounds.min.toString() + " " + dateSliderBounds.max.toString());

//    var dateSliderMax = dateSlider.dateRangeSlider("max");
//    console.log(dateSliderMax.toString());

    // Calling this method forces the slider to update itself
    // and display correctly
    //dateSlider.rangeSlider('resize');

    //dateSlider.rangeSlider('scrollRight', 10);

    //----------------Functions-----------------------------
    function addZero(n) {
        return n.length > 1 ? n : (+n > 0) ? "0" + n : n;
    }

    function calcFreeDaysAndInsertDatesAndPrice() {
        var dateValues = dateSlider.dateRangeSlider("values"),
        daysFrom = dateValues.min.getDate(),
        monthFrom = dateValues.min.getMonth() + 1,
        yearFrom = dateValues.min.getFullYear(),
        daysTo = dateValues.max.getDate(),
        monthTo = dateValues.max.getMonth() + 1,
        yearTo = dateValues.max.getFullYear();
        dateFrom.val(addZero(monthFrom.toString()) + "/" + addZero(daysFrom.toString()) + "/" + yearFrom);
        dateTo.val(addZero(monthTo.toString()) + "/" + addZero(daysTo.toString()) + "/" + yearTo);

        var dt = new Date(dateTo.val()), df = new Date(dateFrom.val()),
        fd = Math.floor((dt - df) / (10 * 1000 * 60 * 60 * 24));
        freeDays.html(fd);

        var avarageDays = Math.floor((dt - df) / (1000 * 60 * 60 * 24)),
            price = avarageDays * 9;
        if (price < minPrice) price = minPrice;
        var discnt = Math.floor(avarageDays*100 / maxDays);
        var prADisc = 0;
        if (discnt > maxDiscount) {
            discnt = maxDiscount;
            prADisc = Math.floor(price - Math.floor(price * (discnt * 0.01)));
        }
        if (discnt < minDiscount) {
            discnt = minDiscount;
            prADisc = Math.floor(price - Math.floor(price * (discnt * 0.01)));
        }
        if(discnt>=minDiscount && discnt<=maxDiscount) {
            prADisc = Math.ceil(price - Math.floor(price * (discnt * 0.01)));
        }
        priceSlider.rangeSlider("values", prADisc, price);
        discount.html(discnt);
        priceBeforeDiscount.html(price);
        priceAfterDiscount.html(prADisc);
    }

    function calculate2ndBlockPrice() {
        var val1 = liftMessageSlider.slider("option", "value"),
        val2 = liftMessageTimeSlider.slider("option", "value"),
        val3 = liftMessageCountSlider.slider("option", "value"),
        val4 = liftMessagePriceSlider.slider("option", "value");
        var price = val3 * val4;
        if (price > 200000) price = 200000;
        var disc2 = Math.floor(price / 8000);
        discount2.html(disc2);
        priceBeforeDiscount2.html(price);
        priceSlider2.rangeSlider("values", (price-(price * disc2 / 100)).toString(), price);
    }
    //----------------EVENTS-----------------------------
//    dateSlider.on("valuesChanging", function (e, data) {
//        console.log("Something moved. min: " + data.values.min + " max: " + data.values.max);
//    });

//    dateSlider.bind("valuesChanged", function (e, data) {
//        console.log("Values just changed. min: " + data.values.min + " max: " + data.values.max);
//    });

    dateSlider.on("valuesChanging", function () {
        calcFreeDaysAndInsertDatesAndPrice();
    });

    dateFrom.on('change', function () {
        var resultFromDate = new Date(dateFrom.val()),
        fromYear = resultFromDate.getFullYear(),
        dateValues = dateSlider.dateRangeSlider("values");
        if (fromYear < 2013) {
            resultFromDate = '01/01/2013';
            dateFrom.val(resultFromDate);
        }
        dateSlider.dateRangeSlider("values", new Date(resultFromDate), new Date(dateValues.max.toString()));
        
    });

    dateTo.on('change', function () {
        var resultToDate = new Date(dateTo.val()),
        toYear = resultToDate.getFullYear(),
        toMonth = resultToDate.getMonth(),
        toDay = resultToDate.getDate(),
        dateValues = dateSlider.dateRangeSlider("values");
        debugger;
        if ((toYear > 2013) && (toMonth > 0 || toDay > 1)) {
            resultToDate = '01/01/2014';
            dateTo.val(resultToDate);
        }
        dateSlider.dateRangeSlider("values", new Date(dateValues.min.toString()), new Date(resultToDate));
    });

    $(document).ready(function () {
        priceSlider.rangeSlider("option", "bounds", { min: 0, max: maxPrice });
        priceSlider.rangeSlider("values", 200, 800);
        calcFreeDaysAndInsertDatesAndPrice();
        priceSlider.rangeSlider({
            enabled: false
        });

        
        calculate2ndBlockPrice();
    });
</script>

<style>
.mini-block
{
    padding: 3px 5px;
    background-color: #F1F1F1;
    display: inline-block;
    min-height: 30px;
    overflow: hidden;
}

.block
{
    border: 1px solid cadetblue;
    min-height: 200px;
     width: 800px;
}

.half-block
{
    min-height: 100px;
    margin: 0 20px 0 0;
    float:left;
    width: 360px;
}

.block-number
{
    padding: 8px 10px;
    background-color:Gray;
    color: White;
    overflow: hidden;
    margin-right: 3px;
}

.changingValue
{
    color: green;
    font-weight:bold;
}

.boldBlue
{
    font-weight:bold;
    color:dodgerblue;
}

.simple-slider
{
    margin: 15px auto;
    width: 300px;
}
</style>